<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <a href="http://www.bilibili.com" id="link">123</a>

  <script id="script1">
    const link = document.getElementById('link');
    const nextTick = new Promise(function (resolve) {
      link.addEventListener('click', resolve, {once: true});
    });
    nextTick.then(event => {
      event.preventDefault(); /** 阻止不了, 会先触发点击动作这个宏任务*/
      console.log('preventDefault');
    });

    /** 原因和上个例子（0.html）是一样的, link.click的时候 script1还在栈里, 我们要等click导致触发的所有宏任务执行完毕后才会执行微任务*/
    link.click();
  </script>
</body>
</html>
